.flex-side-container{
    position: relative; 
    flex: 0 auto ;
    min-width: 25vw ;
    height: 100vh ;
    //background: blue  ;
}
.side-container{
    position: fixed;
    width: 25vw ;
    height: 100vh ;
    right: 0px ;
    //background: blue  ;
    transform-style: preserve-3d;
    .site-title{
        font-family: "Noto Serif SC","HiraMinProN-W6","Source Han Serif CN","Source Han Serif SC","Source Han Serif TC",serif !important;
        position: absolute;
        box-sizing: border-box;
        padding-top: 10px ;
        width: auto ;
        height: auto ;
        top: 40px ;
        left: 30px ;
        writing-mode: vertical-rl;
        //background-color: red ;
        user-select: none;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.08);
        border-left: solid #606975 2px;
        transition: 0.8s ;
        backface-visibility: hidden ;
        h3{
            font-weight: 300 ;
            letter-spacing: 2px ;
            color: #b2bec3 ; 
            transition: 0.8s ;
            line-height: 30px ;
            padding-right: 8px ;
        }
        .a-title{
            cursor: pointer;
            color: #636e72 ;
            font-size: 32px ;
            line-height: 60px ;
            font-weight: 900 ;
            margin-top: 0;
            margin-left: 10px ;
            text-decoration: none;
            background-color: transparent;
            transition: 0.8s ;
        }
        .myIcon{
            position: absolute;
            width: 50px ;
            height: 50px ;
            bottom: 10px ;
            left: 3px ;
            background: center/cover no-repeat ;
            background-image: url("../img/myIcon.png");
        }
        &:hover{
            background: #2d3436 ;
            border-left: solid transparent  2px;
            padding-top: 30px ;
        }
        &:hover h3{
            color: #f1f2f6 ; 
        }
        &:hover .a-title{
            color: #f1f2f6 ; 
        }
        &:hover .myIcon{
            background: transparent ; 
        }
    }
    .category-page{
        position: absolute;
        display: flex ;
        width: 150px ;
        height: 360px ;
        top: 40px ;
        left: 30px ;
        //background: red ;
        border-right: solid #606975 2px;
        transition: 0.8s ;
        transform: rotateY(180deg);
        backface-visibility: hidden ;
        .category-ul{
            position: relative;
            display: flex ;
            width: auto ;
            height: 100% ;
            flex-direction: column;
            list-style: none;
            user-select: none; 
            font-family: "Josefin Sans Light",-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","'Hiragino Sans GB",STHeiti,"Microsoft Yahei","Source Han Sans SC","Noto Sans CJK SC","WenQuanYi Micro Hei",Arial,Verdana,sans-serif;
            color: #606975;
            li{
                box-sizing: border-box;
                position: relative ;
                white-space:nowrap ;
                flex: 1 ;
                width: auto ;
                max-height: 40px ;
                line-height: 40px ;
                letter-spacing: 2px ;
                padding-right: 10px ;
                text-align: right ;
                transition: 0.3s ;
                a{
                    transition: 0.3s ;
                    text-decoration: none ;
                    color: #606975;
                }
                .iconfont{
                    position: absolute;
                    right: -30px ;
                    bottom: 0px ;
                    font-size: 20px ;
                    transition: 0.3s ;
                }
                &::before{
                    content:"" ;
                    position: absolute ;
                    bottom: 0 ;
                    left: 0 ;
                    height: 2px ;
                    width: 100% ;
                    background-color: #2d3436 ;
                    transition: 0.3s ;
                    transform: scaleX(0);
                    transform-origin: right ;
                }
                &::after{
                    content: "" ;
                    position: absolute;
                    bottom: 2px ;
                    right: 5px ;
                    height: 20px ;
                    width: 60% ;
                    background-color: #ffcccc ;
                    transition: 0.3s ;
                    transform: scaleY(0);
                    transform-origin: bottom ;
                    z-index: -1 ;
                }
                &:hover a{
                    color: #f5f6fa ;
                    text-shadow: 2px 2px 2px #718093 ;
                }
                &:hover::before{
                    transform: scaleX(1);
                }
                &:hover::after{
                    transform: scaleY(1);
                }
                &:hover .iconfont{
                    text-shadow: 0px 0px 2px #718093 ;
                }
                &:hover .icon-file_cpp{
                    -webkit-animation:tada 2s linear infinite;
                    animation:tada 2s linear infinite ;
                    color: #7d5fff ;
                }
                &:hover .icon-logo-python{
                    -webkit-animation:pulse 2s linear infinite;
                    animation:pulse 2s linear infinite ;
                    color: #ffeaa7 ;
                }
                &:hover .icon-web-link{
                    -webkit-animation:wrench 2.5s ease infinite;
                    animation:wrench 2.5s ease infinite;
                    transform-origin-x:90%;
                    transform-origin-y:35%;
                    transform-origin-z:initial ;
                    color: #81ecec ;
                }
                &:hover .icon-fengkuangdaqiqiu{
                    -webkit-animation:vertical 2s ease infinite;
                    animation:vertical 2s ease infinite ;
                    color: #ff7675 ;
                }
                &:hover .icon-Comment4{
                    -webkit-animation:tada 2s linear infinite;
                    animation:tada 2s linear infinite ;
                    color: #00b894 ;
                }
                &:hover .icon-sakura-flower{
                    -webkit-animation:roteInf 2s linear infinite;
                    animation:roteInf 2s linear infinite ;
                    color: #fab1a0 ;
                }
                &:hover .icon-order-play-fill{
                    -webkit-animation:pulse 2s linear infinite;
                    animation:pulse 2s linear infinite ;
                    color: #e056fd ;
                }
            }
        }
    }
    .site-title-link{
        box-sizing: border-box;
        position: absolute;
        padding: 0 ;
        margin: 0 ;
        bottom: 30px ;
        left: 30px ;
        width: auto ;
        height: auto ;
        text-align: left ;
        ul{
            list-style: none;
            padding: 0 ; 
            
            li{
                //box-sizing: border-box;
                position: relative;
                margin-top: 5px ;
                padding-left: 5px ;
                padding-top: 2px ;
                line-height: 1.3 ;
                font-weight: bold;
                user-select: none;
                transition: 0.5s ;
                a{
                    cursor: pointer;
                    transition: 0.5s ;
                    color: #2f3542 ;
                    text-decoration: none;
                }
                &:hover{
                    background-color: #2f3542 ;
                }
                &:hover a{
                    color: #ffffff ;
                    font-size: 20px ;
                }
                &:nth-child(n):hover::after{
                    transform: scaleY(1) ;
                }
                &::after{
                    content: "" ;
                    position: absolute;
                    bottom: -1.1em ;
                    right: -3px ;
                    font-size: 0.7em ;
                    font-weight: 300 ;
                    border-top: solid 1px #ffffff ;
                    transition: 0.5s ;
                    transform: scaleY(0) ;
                    transform-origin: top ;
                }
                &:nth-child(1)::after{
                    content: "Category" ;
                }
                &:nth-child(2)::after{
                    content: "Archive" ;
                }
                &:nth-child(3)::after{
                    content: "About" ;
                }
                &:nth-child(4)::after{
                    content: "Site-Link" ;
                }

            }
            .soc{
                margin-top: 10px ;
                padding: 0 ;
                box-sizing: border-box ; 
                z-index: 1 ;
                &:hover{
                    background-color: transparent ;
                }
                &:hover a{
                    background: transparent ;
                    color:transparent ;
                    font-size: 20px ;
                    box-shadow: 0px 0px 5px transparent ;
                }
                .email-show-stop {
                    span {
                        transform: scaleX(1) !important;
                    }
                    .email-div{
                        transform: scaleY(1) scaleX(1) !important;
                    }
                }
                a{  
                    position: relative;
                    box-sizing: border-box;
                    display: inline-block;
                    padding: 0 ;
                    margin-left: 5px ;
                    border-radius: 50% ;
                    width: 30px ;
                    height: 30px ;
                    text-align: center;
                    vertical-align: middle;
                    line-height: 30px ;
                    color: rgba(45, 52, 54,1.0) ;
                    font-size: 20px ;
                    .iconfont{
                        padding: 0 ;
                        font-size: 20px ;
                    }
                    span{
                        position: absolute;
                        left: 0 ;
                        top: 0 ;
                        display: inline-block;
                        width: auto;
                        padding-left: 40px ;
                        padding-right: 10px ;
                        height: 30px ;
                        text-align: center;
                        line-height: 30px ;
                        font-size: 10px  ;
                        border-radius: 20px ;
                        background-color: rgba(245, 246, 250,1.0) ;
                        box-shadow: 0px 0px 5px rgba(113, 128, 147,1.0) ;
                        z-index: -1 ;
                        transition: 0.3s ;
                        transform: scaleX(0);
                        transform-origin: 10px 0px ;
                    }
                    .wechat-img{
                        position: absolute;
                        width: 120px ;
                        height: 120px ;
                        top: -130px;
                        left: 0px;
                        border: 0px ;
                        transition: 0.5s ;
                        transform-origin: 0% 100%;
                        transform: scaleY(0) scaleX(0);
                    }
                    .email-div{
                        position: absolute;
                        width: auto; ;
                        height: 30px ;
                        top: -40px;
                        left: 0px;
                        border: 0px ;
                        text-align: center;
                        line-height: 30px ;
                        font-size: 10px  ;
                        padding-left: 10px ;
                        transition: 0.5s ;
                        transform-origin: 0% 100%;
                        transform: scaleY(0) scaleX(0);
                    }
                    &:hover{
                        color:  rgba(245, 246, 250,1.0) ;
                        background: rgba(245, 246, 250,1.0) ;
                    }
                    &:nth-child(1):hover{
                        background:rgba(45, 52, 54,1.0) ;
                    }
                    &:nth-child(1):hover span{
                        color: rgba(45, 52, 54,1.0) ;
                    }
                    &:nth-child(2):hover{
                        background: rgba(0, 184, 148,1.0) ;
                        .wechat-img{
                            transform: scaleY(1) scaleX(1);
                        }
                    }
                    &:nth-child(2):hover span{
                        color: rgba(0, 184, 148,1.0) ;
                    }
                    &:nth-child(3):hover{
                        background:rgba(255, 118, 117,1.0) ;
                        .email-div{
                            transform: scaleY(1) scaleX(1);
                        }
                    }
                    &:nth-child(3):hover span{
                        color:rgba(255, 118, 117,1.0) ;
                    }
                    &:hover span{
                        transform: scaleX(1);
                    }
                }
                
            }
        }
        .site-info{
            margin-top: 10px;
            padding-top: 0 ;
            font-size: 12px ;
            font-weight: 700 ;
            padding-left: 5px ;
            user-select: none;
            color: #636e72 ;
            p{
                
            }
            a{
                cursor: pointer;
                transition: 0.5s ;
                color: #636e72 ;
                text-decoration: none;
            }
        }
    }
}
#link{
    position: fixed;
    right: 0 ;
    top: 0 ;
    letter-spacing: 1.3px ;
    width: auto;
    height: 10px ;
    color: rgba(149, 165, 166,1.0) ;
    font-size: 0.6em ;
    padding: 10px ;
}
.login-register{
    position: fixed;
    bottom: 5px ;
    right: 5px ;
    font-family: "Noto Serif SC","HiraMinProN-W6","Source Han Serif CN","Source Han Serif SC","Source Han Serif TC",serif;
    margin-top: 10px ;
    padding: 5px ;
    border-radius: 8px ;
    border-bottom-left-radius: 0 ;
    border-bottom-right-radius: 0 ;
    font-weight: 900 ;
    letter-spacing: 1.3px; 
    line-height: 1.3 ;
    user-select: none;
    transition: 0.5s ;
    color: #203744;
    z-index: 1 ;
    transform-style: preserve-3d;
    backface-visibility:hidden;
    
    img{
        position: absolute;
        top: -10px ;
        left: -10px ;
        width: 40px ;
        height: 40px ;
    }
    a,span{
        word-wrap: nowrap ;
        -webkit-backface-visibility:hidden; /* Chrome ºÍ Safari */
        -moz-backface-visibility:hidden;    /* Firefox */
        -ms-backface-visibility:hidden;     /* Internet Explorer */
        transition: 0.3s ;
    }
    span{
        display: inline-block;
        position: relative;
        z-index: 2 ;   
    }
    a{
        display: inline-block;
        position: absolute;
        left: 0 ;
        text-decoration: none;
        color: #203744;
        padding-right: 0 ;
        margin-right: 0 ;
    }
    .login{
        position: relative;
    }
    .cur-user{
        letter-spacing: 0px ; 
        font-size: 0.8em ;
        margin-bottom: 2px ;
        &::after{
            content:"";
            width: 0 ;
            height: 2px ;
            position: absolute;
            bottom: -5px ;
            left: 0 ;
            background: #f09199 ;
            transition: 0.3s ;
            transform-origin: left;
        }
    }
    &:hover{
        .wrench-use{
            animation-play-state: running;
        }
        span{
            color: #478384 ;
        }
        .cur-user{
            color: #1f3134 ;
        }
        .cur-user::after{
            width: 100% ;
        }
    }
}
.footer-page{
    width: auto ;
    height: auto ;
    //background-color: red ;
    position: fixed;
    display: flex;
    flex-direction: column;
    right: 0 ;
    bottom: 150px ;
    font-family: "Noto Serif SC","HiraMinProN-W6","Source Han Serif CN","Source Han Serif SC","Source Han Serif TC",serif;
    z-index: 1 ;
    box-sizing: border-box;
    a{
        text-decoration: none;
        color: #f5f6fa ;
    }
    .cur-page{
        position: absolute;
        bottom: -30px ;
        right: 0 ;
        display: block;
        width: auto;
        line-height: 22px ;
        font-size: 14px ;
        font-weight: 700 ;
        user-select: none;
        //background:linear-gradient(to right,rgba(245, 246, 250,1.0),rgba(178, 190, 195,1.0)) ;
        background-color: #c9171e;
        color: rgba(245, 246, 250,1.0) ;
        border-radius: 5px ;
        border-bottom-right-radius: 0 ;
        border-top-right-radius: 0 ;
        box-shadow: 0px 0px 5px rgba(47, 54, 64,0.7) ;
        padding-left: 5px ;
        padding-right: 2px ;
        letter-spacing: 2px ;
        text-align: center; 
        white-space:nowrap ;
    }

    .page-prev,.page-next{
        display: block;
        position: relative;
        width: 2.2em ;
        font-size: 12px ;
        font-weight: 700 ;
        padding: 10px ;
        padding-left: 0px ;
        line-height: 22px ;
        letter-spacing: 3px;
        text-align:center;
        background: #2f3640 ;
        writing-mode:tb-rl ;
        //margin-top: 5px ;
        margin-bottom: 2px ;
        border-radius: 7px ;
        border-bottom-right-radius: 0 ;
        border-top-right-radius: 0 ;
        box-shadow: 0px 0px 5px rgba(47, 54, 64,1.0) ;
        transition: 0.3s ;
        transform-origin: right;
        transform:translateX(1em);
        &:hover{
            transform:translateX(0em);
        }
    }
    .page-next{
        opacity: 0.8;
    }
    
}
.to-board{
    position: fixed ;
    font-size: 12px ;
    bottom: 60px ;
    left: 0 ;
    border-radius: 0 5px 5px 0;
    width: 35px;
    left: -17px;
    color: #fff;
    font-size: 13px;
    padding: 5px 0;
    padding-top: 5px;
    padding-right: 0;
    padding-bottom: 5px;
    padding-left: 5px;
    font-weight: 700;
    z-index: 99;
    visibility: visible;
    writing-mode: vertical-rl;
    transition-duration: .5s,.5s;
    border-radius: 0 6px 6px 0 !important;
    background-color: orange;
    user-select: none ;
    cursor: pointer;
    text-decoration: none ;
    &:hover {
        padding-left: 17px;
    }
}
.moon-back{
    position: fixed;
    width:100px;
    height:100px;
    top: 40px ;
    right: 40px ;
    background-image: url("../img/moon_2.png");
    z-index: 12 ;
    cursor: pointer;
}
.moon-light{
    position: fixed;
    width: 100px ;
    height: 100px ;
    border-radius: 50% ;
    z-index: 11 ;
    top: 40px ;
    right: 40px ;
    &::after{
        content: "";
        position: absolute;
        width: 70%;
        height: 70%;
        top: 50%;
        margin-top: -40%;
        left: 50%;
        margin-left: -40%;
        border-radius: 50%;
        background-color: #fab1a0;
        -webkit-filter: blur(40px);
        -moz-filter: blur(40px);
        -ms-filter: blur(40px);
        filter: blur(30px);
    }
}
.moon-font{
    position: fixed;
    width: 100px;
    height: 100px;
    right: 200px ;
    bottom: 200px ;
    background-image: url("../img/pic3.png");
    z-index: 13 ;
}
.lightCover{
    position: fixed;
    width: 0 ;
    height: 0 ;
    z-index: 10 ;
}
#canvas_sakura{
    z-index: 13 !important ;
}
.fake-info {
    position: fixed;
    right: 80px ;
    bottom: 40px ;
    user-select: none;
    color: rgba(99, 110, 114, 0.8);
    z-index: 13 ;
    h1 {
        font-size: 20px ;
        letter-spacing: 1.1px;
        font-weight: 400 ;
    }
    p {
        font-size: 14px ;
        letter-spacing: 0 ;
    }
}
.moon-hidden {
  display: none !important;
}
#preogressbar {
  position: fixed;
  top: 0 ;
  left: 0 ;
  width: 7px ;
  z-index: 13 ;
  background-image: linear-gradient(to top, #ff7675, #fab1a0, #81ecec);
  animation-name: scrossTurn ;
  animation-duration: 5s ;
  animation-play-state: running;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.72, 0.01, 1, 1);
  animation-delay: 0s ;
  box-shadow: 0 0 10px rgba(99, 110, 114, 0.5);
}
#preogressbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0 ;
  width: 120% ;
  height: 100% ;
  background-image: linear-gradient(to top, #fab1a0, #ecf0f1, #81ecec, #00b894);
  filter: blur(40px);
}
#preogressbar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0 ;
  width: 120% ;
  height: 100% ;
  background-image: linear-gradient(to top, #fab1a0, #ecf0f1, #81ecec, #00b894);
  filter: blur(80px);
}
#scrollpath {
  position: absolute;
  top: 0 ;
  right: 0 ;
  width: 10px ;
}